<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			通配符           *
			元素选择       p,div
			类选择器       .class
			id选择器       #id
			群组选择器   a,b
			关系选择器
			     子孙关系   a   b
			     子代关系   a > b
			     兄弟关系   a ~ b
			     相邻关系   a + b
			     属性选择器     [type]
			     伪类选择器    ：
			   伪对象选择器  ：：
			   伪对象
			   通过css创建出一个“元素”
			   ：：after/::before 分别在元素内部的最后
			   
		-->
		<style type="text/css" >
			.baba, .son{
				
				margin: 10px;
				width: 100px;
				height: 100px;
				background:skyblue;
			}
			
			.baba:hover ~.son{
				background: red;
			}
			.baba:after{
				content: "--023";
				display: block;
				height: 30px;
				width: 80px;
				background: pink;
			}
			
		</style>
		
		
		<div class="baba">dwdadwad</div>
		<div class="son"></div>
		
	</body>
</html>
